<template>
	<view class="help-page">
			<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
			<z-paging-swiper>
				<!-- 此处代码复制了uView中tabsSwiper全屏选项卡的代码 -->
				<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
				<view slot="top">
					<u-navbar class="navbar" :border-bottom="false" back-icon-name="arrow-left" title="帮帮忙" title-color="#343434" :title-size="36" :is-back="false"></u-navbar>
					<u-tabs-swiper ref="uTabs" bar-width="80" :list="tabList" :current="current" @change="tabsChange" :is-scroll="false"
						swiperWidth="750"></u-tabs-swiper>
						<view  style="background: white;" >
							<u-dropdown>
							<u-dropdown-item v-model="cureentScreen" title="任务类型" :options="options"></u-dropdown-item>
							<u-dropdown-item v-model="cureentScreen" title="状态" :options="options1"></u-dropdown-item>
						</u-dropdown>
						</view>
						
				</view>
				<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
				<swiper class="swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
					<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
						<swiper-list-item :tabIndex="index" :currentIndex="swiperCurrent"></swiper-list-item>
					</swiper-item>
				</swiper>
			</z-paging-swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				taskList:[],
				tabList: [{
					name: '全部任务'
				},{
					name: '跑腿任务'
				},{
					name: '全民抢单'
				},{
					name: '代替服务'
				},{
					name: '租借服务'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				cureentScreen:'1',
				options:[
					{
						label: '默认排序',
						value: 1,
					}
				],
				options1:[
					{
						label: '待帮助',
						value: 1,
					}
				]
			};
		},methods:{
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}
		},
		async onLoad() {
			// this.taskList = await this.$api('dataList')
		}
	}
</script>

<style lang="scss" scoped>
	@import "/css/help.scss"
</style>
